function Caret(){
    this.initRenderable();
    this.$blinkTimer = null;
    this.$blink = Utils.bind(this._blink, this);
    this.$position = [0, 0];
}

Caret.prototype = {
    _TPL_ELM: '<div id="#{id}" class="QECaret" style="visibility: hidden;"></div>',
    renderHTML: function (){
        return Utils.format(this._TPL_ELM, { id: this.id() });
    },
    setCaret: function (point, height){
        var elm = this.elm();
        elm.style.left = point[0] + 'px';
        elm.style.top = point[1] + 'px';
        elm.style.height = height + 'px';
        this.$position = point;
    },
    getPosition: function (){
        return this.$position;
    },
    restart: function (){
        this.stop();
        this.show();
        this.$blinkTimer = setInterval(this.$blink, 1000);
    },
    _blink: function (){
        this.hide();
        var self = this;
        setTimeout(function (){
            self.show();
        }, 400);
    },
    show: function (){
        this.elm().style.visibility = 'visible';
    },
    hide: function (){
        this.elm().style.visibility = 'hidden';
    },
    stop: function (){
        clearTimeout(this.$blinkTimer);
    }
};

Utils.extend(Caret, Renderable);